<template>
    <div class="newsInfo">
        <h3 class="">{{ newInfo.title }}</h3>
        <p class='newsInfoMenu'>
            <span>发表时间：{{ newInfo.add_time | DateFormat}}</span>
            <span>点击次数：{{ newInfo.click }}次</span> 
        </p>

        <hr>

        <div class="newsContent" v-html="newInfo.content">
        </div>

        <!--调用评论子组件-->
        <talk :id='this.id'></talk>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'

//导入评论子组件
import talk from '../subComment/talk.vue'
    export default {
        data() {
            return{
                id: this.$route.params.id, //将获取到url上的id挂载到data，方便后面调用
                newInfo: {},
            }
        },
        created:function(){
            this.getNewsInfo();
        },

        methods:{
            //获取新闻详情数据

            getNewsInfo(){
                this.$http.get('api/getnew/' + this.id).then( result => {                 
                    if(result.body.status === 0){
                        this.newInfo = result.body.message[0];
                    }else{
                        Toast({
                            message: '操作失败',
                            position: 'middle',
                            duration: 2000
                        });
                    }
                });
            }
        },
        components:{
            talk, //注册评论子组件
        }
    }
</script>

<style lang="less">
    .newsInfo{
        padding: 10px 4px;  
        h3{
            text-align: center;
            font-size: 16px;
            margin: 10px 0 15px;
        }
        .newsInfoMenu{
            display: flex;
            -webkit-box-pack: justify;
            justify-content: space-between;
            -webkit-justify-content: space-between;
        }
        .newsContent{
            margin-top: 15px;
            img{
                width: 100%;
            }
        }    
    }
    
</style>
